import React, { useEffect, useState, useRef } from "react";
import {Input, Menu, Modal, Tabs, Tree} from 'antd';
import { request } from 'dw-mx-request';
import { useHistory, useLocation } from 'dw-mx-router';
import url from "url";
import './style/operationPanel.css';
import AppPage from '@/application/AppPage';
import MainPanel from "@/application/MainPanel";
import {RollbackOutlined,ProjectOutlined,DatabaseOutlined,PictureFilled,AppstoreFilled,MenuOutlined,SettingOutlined,CloseOutlined} from 'dw-mx-icons';
import {FlexItem, RowFlex} from "dw-mx-flex";
import hook from '@/hook';
export default function AppIndex(props) {
    const defaultJson = {
        "type":{
            "name":'bigscreencanvas'// 六个type，bigscreencanvas（布局），basecharts（常规charts），mapcharts（地图charts），reacteditor（自定义组件）,rowflex(横向布局组件),colflex(纵向布局组件)
        },// 数据类型
        "children":[],
        "id":'mainPage',// 组件id，mainPage为主页面
        "props":{
            "designWidth":'1920px',// 主页的设计稿宽度，即配置的分辨率
            "designHeight":'1080px',// 主页的设计稿高度，即配置的分辨率
            "bgpic":'',
        },// 组件参数
        "addition":{
            "position":{},// 定制化的定位属性,布局用,主页面不需要此属性
            "function":{
                "functionName":{
                    name:"test",
                    body:"const test = () =>{alert(1);}"
                }
            },
            "layout":"collayout"
        },
        "mappingVariableName":""
    };
    const { SubMenu } = Menu;
    const history = useHistory();
    const [pageJson,setPageJson] = useState(defaultJson);
    const [appID, setAppID] = useState('');
    const [appName, setAppName] = useState('');
    const [panes, setPanes] = useState([]);
    const [pageID, setPageID] = useState('');

    const closeModal = (result) =>{
        const designWidth = result['designWidth'];
        const designHeight = result['designHeight'];
        const getChangeResolution = (width,height)=>{
            const changeJson = {...pageJson,props:{
                    ...pageJson['props'],
                    designHeight:height,
                    designWidth:width
                }};
            setPageJson(changeJson);
        };
    };

    const {SettingModal,openModal} = hook.useSettingModal({
        appid:appID,
        appname:appName,
        resolution:{
            width:pageJson ? pageJson['props']['designWidth'] : defaultJson['props']['designWidth'],
            height:pageJson ? pageJson['props']['designHeight'] : defaultJson['props']['designHeight'],
        },
        closeModal:closeModal
    });
    //分辨率的开关
    const [close,setClose] = useState(false);
    //页面列表开关
    const [pageClose,setPageClose] = useState(false);

    const [pageCode,setPageCode] = useState("pageEditer");

    useEffect(() => {
        const search = url.parse(location.search,true);
        const appid = search.query.appid;
        const appname = search.query.appname;
        setAppID(appid + '');
        setAppName(appname + '');
        initAppPage(appid);
    }, []);

    const initAppPage = async (appid) => {
        const res = await request('/mx/bigScreen/queryPage', {
            appid: appid
        });
        const pageList = JSON.parse(res);
        const paneList = [];
        const pane = {};
        if(pageList && pageList.length > 0){
            pane['title'] = pageList[0]['pagename'];
            pane['key'] = pageList[0]['pageid'];
            paneList.push(pane);
            setPanes(paneList);
            setPageID(pageList[0]['pageid']);
            initPageJson(pageList[0]['pageid']);
        }
    };

    const initPageJson = async (pageid) => {
        const res = await request('/mx/bigScreen/initPageJson', {
            pageid: pageid,
        });
        const pageJsonStr = JSON.parse(JSON.parse(res)[0].pagecontent);
        setPageJson(pageJsonStr);
    };
    return (
        <div style={{height:'100%',padding:12}}>
            {/*<div style={{position:"absolute",top:'1rem',left:'4rem',zIndex:1,backgroundColor:'#fff'}}>*/}
                {/*<Tree treeData={panes}/>*/}
            {/*</div>*/}
            {/*{panes.length > 0 ? <MainPanel panes={panes} appid={appID} pageid={panes[0].key}/> : null}*/}
            <RowFlex style={{height:'100%'}}>
                <FlexItem flexBasic={'0.81rem'}>
                    <div style={{flex:1}} className={'dlc-mp-menu'}>
                        <Menu inlineCollapsed={true}>
                            <Menu.Item key="1" icon={<RollbackOutlined />} onClick={()=>{
                                history.goBack();
                            }}>
                                返回上一层
                            </Menu.Item>
                            <Menu.Item key="2" icon={<ProjectOutlined />} onClick={()=>{

                            }}>
                                页面编辑
                            </Menu.Item>
                            <Menu.Item key="3" icon={<DatabaseOutlined />}>
                                事件配置
                            </Menu.Item>
                            <Menu.Item key="sub1" icon={<PictureFilled />}>
                                素材库
                            </Menu.Item>
                            <Menu.Item key="sub2" icon={<AppstoreFilled />}>
                                自定义组件
                            </Menu.Item>
                        </Menu>
                        <Menu selectedKeys={[]} style={{position:"absolute",bottom:12}} inlineCollapsed={true}>
                            <SubMenu key="sub1" icon={<MenuOutlined />} title="Navigation One">
                                <Menu.Item key="5" onClick={()=>{
                                    setPageClose(false);
                                }}>展示页面树</Menu.Item>
                                <Menu.Item key="6" onClick={()=>{
                                    setClose(false);
                                }}>展示分辨率</Menu.Item>
                                <Menu.Item key="7">调整背景图</Menu.Item>
                            </SubMenu>
                            <Menu.Item onClick={()=>{
                                openModal();
                            }} key="sub2" icon={<SettingOutlined />}>
                                应用配置
                            </Menu.Item>
                        </Menu>
                    </div>
                </FlexItem>
                <FlexItem overflow={'hidden'} style={{height:'100%'}}>
                    <MainPanel pageJson={pageJson} setPageJson={setPageJson} setClose={setClose} setPageClose={setPageClose} close={close} pageClose={pageClose} panes={panes} appid={appID} pageid={pageID}/>
                </FlexItem>
            </RowFlex>
            <SettingModal/>
        </div>
        /*<div>
            {/!*<Tabs*!/}
                {/!*type="editable-card"*!/}
                {/!*onChange={(val)=>onChange(val)}*!/}
                {/!*activeKey={appID}*!/}
                {/!*onEdit={(targetKey, action)=>onEdit(targetKey, action)}*!/}
            {/!*>*!/}
                {/!*{panes.map(pane => (*!/}
                    {/!*<TabPane tab={pane.title} key={pane.key}>*!/}
                        {/!*<AppPage appid={appID}/>*!/}
                    {/!*</TabPane>*!/}
                {/!*))}*!/}
            {/!*</Tabs>*!/}
            <AppPage appid={appID}/>
            {/!*<Export/>*!/}
        </div>*/
    );
}